
* {margin:0; padding:0;}
html,body{width:100%; position:relative;}
html {font-size:62.5%;}               // iphone 5(320)
@media (min-device-width: 375px) {    // iphone 6
  html{font-size: 72%}
}
@media (min-device-width: 414px) {    // iphone 6p
  html{font-size: 79%}
}
@media (min-device-width: 768px) {    // ipad
  html{font-size: 110%}
}

body{
  .pf;
}

/** layout */
.fs9{font-size: 0.9rem;}
.fs12{font-size: 1.2rem;}
.fs13{font-size: 1.3rem;}
.fs15{font-size: 1.5rem;}
.fs16{font-size: 1.6rem;}
.fs20{font-size: 2.0rem;}
.fs30{font-size: 3.0rem;}
.fs40{font-size: 4.0rem;}


.w_30{width: 30%;}
.w10{width: 10px;}
.w20{width: 20px;}
.w30{width: 30px;}
.w100{width: 100%;}
.w93{width: 93%;}
.w95{width: 95%;}
.w98{width: 98%;}
.w501{width: 50%;}
.mw45{min-width: 45%;}
.w50{width: 50px;}

.h_10{height: 10%;}
.h_20{height: 20%;}
.h_80{height: 80%;}

.h10{height: 10px;}
.h20{height: 20px;}
.h30{height: 30px;}
.h50{height: 50px;}
.h80{height: 80px;}
.h100{height: 100px;}
.h150{height: 150px;}
.h200{height: 200px;}
.h250{height: 250px;}
.h300{height: 300px;}
.h350{height: 350px;}
.lh30{line-height: 30px;}

.mt5{margin-top: 5px;}
.ml5{margin-left: 5px;}
.mA{margin: 0 auto;}

.fl{float: left;}
.fr{float: right;}
.cb{clear: both;}
.tac{text-align:center;}
.tar{text-align: right;}
.tal{text-align: left;}

/* font-family */
.pf{font-family:PingFang;}

/* font-size */
.fz12{font-size: .6rem;}
.fz14{font-size: .7rem;}
.fz16{font-size: .8rem;}
.fz18{font-size: .9rem;}



/** color */
@white:#FFFFFF;       // 白色
@pink: #FFC0CB;       // 粉色 (Pink)
@red:  #F08080;       // 淡珊瑚色(LightCoral)
@lightRed:#ff0000;    // 亮红色
@green: #48D1CC;      // 适中的绿宝石(MediumTurquoise)
@blue: #0E97d6;       // 深天蓝(DeepSkyBlue) (利尔达蓝)
@lightBlue: #11bbf9;  // 浅蓝色
@lightGrey:#D3D3D3;   // 浅灰色
@gray:#A9A9A9;        // 灰色
@deepGray:#696969;    // 暗淡的灰色
@litterGray:#585858;  //浅灰色
@Black:#000000;       // 黑色
@Bluecen:#2aa0fc;       // 浅蓝


.ff00{color: #FF0000;}
.White{color: @white;}
.Pink{color: @pink;}
.Red{color: @red;}
.LightRed{color:@lightRed}
.Green{color: @green;}
.Blue{color:@blue;}
.LightBlue{color:@lightBlue;}
.LightGrey{color:@lightGrey;}
.Gray{color: @gray;}
.DeepGray{color:@deepGray;}
.LitterGray{color: @litterGray;}
.Black{color: @Black;}
.Bluecen{color: @Bluecen;}

.White_bgc{background-color: @white !important;}
.Pink_bgc {background-color: @pink !important;}
.Red_bgc {background-color: @red !important;}
.Light_red_bgc{background-color:@lightRed !important;}
.Green_bgc {background-color: @green !important;}
.Blue_bgc {background-color: @blue !important;}
.LightBlue_bgc {background-color: @lightBlue !important;}
.LightGrey_bgc{background-color: @lightGrey !important;}
.Gray_bgc{background-color: @gray !important;}
.DeepGray_bgc {background-color: @deepGray !important;}
.Black_bgc{background-color: @Black !important;}
.Green_red{background-color: #0000ed};



.area_ctrl.slideInUp{
  font-size: .5rem;
}